<template>
	<view class="scroll-content">
		{{dataList.length}}
		<view v-for="(item, index) in dataList" :key="index" class="item">
			<!-- 列表项内容 -->
			<text>{{ item }}</text>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				dataList: [], // 存储数据的数组
				currentPage: 1, // 当前页码
				pageSize: 15, // 每页数据条数
				loading: false, // 是否正在加载数据的标志
				canExecute: true
			}
		},

		onLoad() {
			this.currentPage = 1
			this.loadNextPage();

		},
		onPageScroll(e) {

				// e.scrollTop 表示当前页面滚动的距离
				console.log('页面滚动距离：', e.scrollTop);
				
				if (e.scrollTop <= 50 && this.canExecute) {
					console.log('&&&&&&&');
					// 更新当前页码
					this.currentPage++;
					this.loadNextPage();
					// 执行一次后将标志位设置为false，不允许再次执行
					this.canExecute = false;
				} else if (e.scrollTop > 50) {
					// 当滚动距离大于50时，重新允许执行方法
					this.canExecute = true;
				}
			
		},
		methods: {
			// 加载下一页数据
			loadNextPage() {
				// 如果正在加载中，则不触发重复请求
				if (this.loading) return;
				this.loading = true; // 设置加载状态为true，防止重复加载
				// 模拟从接口获取数据
				const newData = this.generateMockData(this.pageSize);
				// 将新数据拼接到现有数据列表中
				this.dataList = [...newData, ...this.dataList];
				
				console.log(this.currentPage, '@@@@');
				

				setTimeout(() => {
					if (this.currentPage == 1) {
						uni.pageScrollTo({
							scrollTop: 20000, // 滚动到页面的目标位置（单位px）
							duration: 300 // 滚动动画的时长，默认300ms，单位 ms
						});
						// this.scrollToBottom();
					} else {
						uni.pageScrollTo({
							scrollTop: 60, // 滚动到页面的目标位置（单位px）
							duration: 300 // 滚动动画的时长，默认300ms，单位 ms
						});
					}
				}, 10);
				
				// 加载完成后，重置加载状态
				this.loading = false;
				

			},
			// 生成模拟数据
			generateMockData(count) {
				let newData = [];
				for (let i = 0; i < count; i++) {
					newData.push(`Item ${this.dataList.length + i}`);
				}
				return newData;
			},

			scrollToBottom() {
				uni.createSelectorQuery().select('.scroll-content').boundingClientRect(data => {
					
					console.log(data,7777777);
					if (data) {
						uni.pageScrollTo({
							scrollTop: data.bottom,
							duration: 0 // 如果想立即滚动，可以设置为0
						});
					}
				}).exec();
			},
			// onScroll(event) {
			//   // event.detail.scrollTop 是当前滚动条的垂直位置
			//   console.log('滚动位置:', event.detail.scrollTop);
			// }
		}
	}
</script>

<style>
	.scroll-content{
		padding-top:60px;
	}
	.item {
		height: 100px;
		line-height: 80px;
		text-align: center;
		border: 1px solid #ccc;
		margin-bottom: 10px;
	}
</style>
